<template>
    <div class="selecter" v-if="showStoreBox">
        <div class="store-list">
            <div class="title">店铺选择</div>
            <div class="search-words">
                <el-input class="search-words-input" v-model="searchContent.storeName" placeholder="请输入店铺名称"></el-input>
                <el-input class="search-words-input" v-model="searchContent.store_owner" placeholder="请输入公司名称"></el-input>
                <el-input class="search-words-input" v-model="searchContent.storeUserName" placeholder="店主"></el-input>
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button type="primary" @click="reset">重置</el-button>
            </div>
            <div class="search-store-list">
                <el-table 
                    :data="storeList" border height="356" class="storeTable" 
                    @selection-change="handleSelectionChange" @row-click="handleClickRow">
					<el-table-column v-if="chooseAll" type="selection" width="55"></el-table-column>
                    <el-table-column align="center" prop="storeName" label="店铺名称" min-width="120"></el-table-column>
                    <el-table-column align="center" prop="storeOwner" label="公司名称" min-width="150"></el-table-column>
                    <el-table-column align="center" prop="storeUserName" label="店主用户名" min-width="120"></el-table-column>
                    <el-table-column align="center" prop="storeLevel" label="所属等级" min-width="120">
                        <template slot-scope="scope">
                            {{storeLevel(scope.row.storeLevel)}}
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="store_end_time" label="有效期至" min-width="120">
                        <template slot-scope="scope">
                            <span>{{scope.row.store_end_time | dateFormatter('YYYY-MM-DD ')}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="storeStatus" label="状态" min-width="80">
                        <template slot-scope="scope">
                            {{storeStatus(scope.row.storeStatus)}}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="paginationOne page">
				<el-button type="primary" size="small" @click="selectMore" v-if="chooseAll">确定</el-button>
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="searchContent.currentPage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="searchContent.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    popper-class="store-list-pagination"
                    :total="total">
                </el-pagination>
            </div>
        </div>
        <div class="bg" @click="$emit('update:showStoreBox',false)"></div>
    </div>
</template>
<script>
    export default {
		name: "storeList",
		props: {
			showStoreBox: {
				type: Boolean,
				required: true
			},
			chooseAll: {
				type: Boolean,
				default: false
			},
            rowClick: { // 支持点击行时添加店铺数据
                type: Boolean,
                default: true
            }
		},
		data(){
			return {
                total: 0,
				searchContent: {
					currentPage: 1,
                    pageSize: 10,
                    storeName: '',
                    store_owner: '',
                    storeUserName: ''
				},
				storeList: [],
				check: []
			}
		},
		mounted() {
            // console.log(this.$store.state)
        },
        methods: {
			handleClickRow(row) {
                if (!this.rowClick) return
				this.$emit("chooseStore", row);
				this.$emit('update:showStoreBox', false);
			},
			selectMore() {
				this.$emit("chooseStore", this.check);
				this.$emit('update:showStoreBox', false);
			},
			handleSelectionChange(check) {
                this.check = check;
			},
            getStoreList() {
                const data = {};
				data.page = this.searchContent.currentPage;
                data.eachNum = this.searchContent.pageSize;
                data.storeName = this.searchContent.storeName;
                data.store_owner = this.searchContent.store_owner;
                data.storeUserName = this.searchContent.storeUserName;
                this.$http.post('/admin/store/index.php?act=storeManage&op=getStoreList', data).then(res => {
                    if (res.code == 1) {
                        if (res.data && res.data.list.length) {
                            this.storeList = res.data.list.map(function(item) {
                                return {
                                    storeId: item.store_id,
                                    storeName: item.store_name,
                                    storeOwner: item.store_owner,
                                    storeUserName: item.member_name,
                                    storeLevel: item.grade_id,
                                    storeStatus: item.store_state,
                                    store_end_time:item.store_end_time
                                }
                            });
                            this.total = parseInt(res.data.totalNum);
                        } else {
                            this.storeList = [];
                            this.total = 0;
                        }
                    }
                    else if (res.code == 2001) {
                        this.storeList = [];
                        this.total = 0;
                    }
                    else {
                        alert(res.msg);
                    }
                })
            },
			search() {
				this.searchContent.currentPage = 1;
				this.getStoreList();
			},
            reset() {
                this.searchContent = {
					currentPage: 1,
                    pageSize: 10,
                    storeName:'',
                    storeUserName:''
                }
                this.search()
            },
			handleSizeChange(pageSize) {
				this.searchContent.pageSize = pageSize;
				this.searchContent.currentPage = 1;
				this.getStoreList();
			},
			handleCurrentChange(page) {
				this.searchContent.currentPage = page;
				this.getStoreList();
            },
            storeStatus(status) {
                switch (status) {
                    case '0':
                        return "关闭";
                    case '1':
                        return "开启";
                }
            },
            storeLevel(level) {
                switch (level) {
                    case '1':
                        return "默认店铺";
                    case '2':
                        return "白金店铺";
                }
            }
        },
        created() {
            this.getStoreList();
        }
		
    }
</script>
<style lang="scss" scoped>
.store-list{
	position: fixed;
	width: 800px;
	height: 500px;
	margin: 0 auto;
    top: 20%;
    left: 30%;
    z-index: 9999;
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
    .title{
        font-size: 18px;
        text-align: center;
        margin-bottom: 15px;
    }
	.search-words{
        margin-bottom: 10px;
		.search-words-input{
			width: 200px;
            margin: 0 5px;
		}
	}
	.search-store-list{
		width: 100%;
	}
    .page{
        position: absolute;
        bottom: 5px;
        left:0;
    }
    
}

.bg{
    content: '';
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    left: 0;
    top: 0;
    z-index: 1000;
}
.paginationOne{
	width: 100%;
	box-sizing: border-box;
	display:flex;
	justify-content: space-between;
	align-items: center;
}
.el-table /deep/ {
    > th.el-table__cell > .cell {
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }
    .cell {
        text-align: center;
    }
}
</style>